<template>
  <AreaNumber :content="content" />
  <div class="line"></div>
  <el-form ref="formRef" :model="form" label-width="auto" label-position="left">
    <el-form-item prop="venueInfo" label="场地介绍" :rules="[
    {
      required: true,
      message: '请输入场地介绍',
      trigger: 'blur',
    },
  ]">
      <el-input v-model="form.venueInfo" :rows="2" type="textarea" placeholder="请输入场地介绍" />
    </el-form-item>
    <el-form-item prop="venueBusinessHours" label="营业时间" :rules="[
    {
      required: true,
      message: '请输入营业时间',
      trigger: 'blur',
    },
  ]">
      <el-input v-model="form.venueBusinessHours" style="width: 300px" placeholder="请输入营业时间" />
    </el-form-item>
    <el-form-item prop="venueTag" label="标签设置" :rules="[
      { type: 'array', required: true, message: '请至少设置一个标签', trigger: 'trigger' }
    ]">
      <el-tag :key="tag" v-for="tag in form.venueTag" closable :disable-transitions="false" @close="handleClose(tag)">
        {{ tag }}
      </el-tag>
      <el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" style="width: 200px" ref="saveTagInput"
        size="small" placeholder="请输入标签后回车" @keyup.enter="handleInputConfirm" @blur="handleInputConfirm">
      </el-input>
      <el-button v-else class="button-new-tag" size="small" @click="showInput">添加标签</el-button>
    </el-form-item>
    <el-form-item prop="venuePhoto" label="场馆图">
      <UploadImg :originFileList="form.venuePhoto"
          :limit="1"
          :onChange="(value: any) => form.venuePhoto = value" />
    </el-form-item>
    <el-form-item prop="venueAlbum" label="场地分布图">
      <UploadImg :originFileList="form.venueAlbum"
          :limit="5"
          :onChange="(value: any) => form.venueAlbum = value" />
    </el-form-item>
    <div style="margin-top: 20px">
      <el-button type="primary" @click="submitForm(formRef)">确认</el-button>
      <el-button @click="resetForm(formRef)">取消</el-button>
    </div>
  </el-form>
</template>

<script lang="ts" setup>
import { reactive, ref, computed, onUpdated, onMounted,nextTick } from "vue";
import { ElMessage, FormInstance } from "element-plus";
import UploadImg from "./UploadImg.vue";
import {transformToSubmit, transformToEdit} from "../utils.ts";
import AreaNumber from "./AreaNumber.vue";
import { postUpdateArea } from "@/api/area/index";

interface ImgModel {
  name: string
  url: string
}

const props = defineProps(["content"]);
const emits = defineEmits(["submitChange"]);
const formRef = ref<FormInstance>();

const form = reactive<{
  venueInfo: string;
  venuePhoto: ImgModel[];
  venueAlbum: ImgModel[];
  venueMinOrderHours: number;
  venueBusinessHours: string;
  venueTag: string[];
}>({
  venueInfo: "",
  venuePhoto: [],
  venueAlbum: [],
  venueMinOrderHours: 2,
  venueBusinessHours: "",
  venueTag: []
});
const saveTagInput = ref()
const inputVisible = ref(false);
const inputValue = ref("");

const params = computed(() => {
  return props.content;
});

onUpdated(() => {
  initDate();
});
onMounted(() => {
  initDate();
});
const initDate = () => {
  form.venueInfo = props.content.venueInfo || "";
  form.venuePhoto = transformToEdit(props.content.venuePhoto,true) || [];
  form.venueAlbum = transformToEdit(props.content.venueAlbum,false) || [];
  form.venueBusinessHours = props.content.venueBusinessHours || "";
  form.venueTag = props.content.venueTag || [];
};

const handleClose = (tag: string) => {
  form.venueTag.splice(form.venueTag.indexOf(tag), 1)
}

const showInput = () => {
  inputVisible.value = true
  nextTick(() => {
    saveTagInput.value.focus()
  })
}

const handleInputConfirm = () => {
  if (inputValue.value) {
    form.venueTag.push(inputValue.value)
  }
  inputVisible.value = false
  inputValue.value = ''
}

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      params.value.venuePhoto = transformToSubmit(form.venuePhoto, true)
      params.value.venueAlbum = transformToSubmit(form.venueAlbum, false)
      params.value.venueInfo = form.venueInfo;
      params.value.venueMinOrderHours = form.venueMinOrderHours;
      params.value.venueBusinessHours = form.venueBusinessHours;
      params.value.venueTag = form.venueTag;
      postUpdateArea(params.value).then(() => {
        ElMessage({
          message: "保存成功",
          type: "success",
        });
        emits("submitChange")
      });
    } else {
      console.log("error submit!");
      return false;
    }
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};
</script>

<style lang="scss">
.line {
  border: 0.5px solid #eeeeee;
  margin: 15px -15px;
}

.el-tag+.el-tag {
  margin-left: 10px;
}

.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}

.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>
